<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>弧线的绘制及编辑</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=ea85df817201ed0f4a55b74767b5ca34&plugin=AMap.BezierCurveEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <style>
            html,
            body,
            #container {
                width: 100%;
                height: 100%;
            }
        </style>
        <title>弧线的绘制和编辑</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=ea85df817201ed0f4a55b74767b5ca34&plugin=AMap.BezierCurveEditor"></script>
        <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
    <button class="btn" onclick="bezierCurveEditor.open()" style="margin-bottom: 5px">改变曲率</button>
    <button class="btn" onclick="bezierCurveEditor.close()">固定曲率</button>
    <button id = "curvePath" class="btn" @click="getPath">获取曲线路径</button>
</div>
<script type="text/javascript">
    //定义一个数据结构，用于表示无人机所在的经纬度以及高度信息
    function Location(X, Y, Z) {
        this.X = X
        this.Y = Y
        this.Z = Z
    }

    var map = new AMap.Map("container", {
        center: [114.360734, 30.541093],
        zoom: 14
    });

    var path = [[114.360734, 30.541093],//起点
        [114.361734, 30.543093, 114.360734, 30.545093]]//控制点，途经点

    var bezierCurve = new AMap.BezierCurve({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 3,
        strokeColor: "#3366FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 10],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })

    bezierCurve.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ bezierCurve ])

    var bezierCurveEditor = new AMap.BezierCurveEditor(map, bezierCurve)

    bezierCurveEditor.on('addnode', function(event) {
        log.info('触发事件：addnode')
    })

    bezierCurveEditor.on('adjust', function(event) {
        log.info('触发事件：adjust')
    })

    bezierCurveEditor.on('removenode', function(event) {
        log.info('触发事件：removenode')
    })

    bezierCurveEditor.on('end', function(event) {
        log.info('触发事件： end')
        // event.target 即编辑后的曲线对象
    })

    let getPath = new Vue({
        el:'#curvePath',
        methods:{
            getPath(){
                var accuratePathList = []//根据需求记录曲线上精细的坐标点信息

                var pathList =  bezierCurve.getPath()
                console.log("路径：")
                console.log(pathList)
                //获取各个曲线分段的控制点以及终点坐标，用于重新计算得到曲线方程，便于后续获取曲线上任意个点
                for (var pathNum = 1; pathNum < pathList.length; pathNum++) {
                    var pixel0 = map.lngLatToContainer(new AMap.LngLat(pathList[pathNum-1].lng,pathList[pathNum-1].lat))
                    var pixel1 = map.lngLatToContainer(new AMap.LngLat(pathList[pathNum].lng,pathList[pathNum].lat))
                    var pixel1_control = map.lngLatToContainer(new AMap.LngLat(pathList[pathNum].controlPoints[0].lng,pathList[pathNum].controlPoints[0].lat))
                    // console.log("起始点：" + pixel0.x + " " + pixel0.y)
                    // console.log("控制点：" + pixel1_control.x + " " + pixel1_control.y)
                    // console.log("结束点：" + pixel1.x + " " + pixel1.y)
                    // console.log("路径长度：" + bezierCurve.getLength())

                    //尝试在地图上标记点位
                    var pointCount = 11;//暂时写成固定的，后续可以根据需求进行路径上点的数量的调整
                    for (var num = 0; num < pointCount; num++) {
                        var t = num * (1 / (pointCount - 1))
                        var pixel = getPathPoint(pixel0.x, pixel0.y, pixel1_control.x, pixel1_control.y, pixel1.x, pixel1.y, t)
                        //console.log("第" + (num + 1) + "个点:" + pixel[0] + " " + pixel[1])

                        var pixelMap = new AMap.Pixel(pixel[0], pixel[1])
                        var lnglat = map.containerToLngLat(pixelMap)
                        var curCoordinate = new Location(lnglat.lng, lnglat.lat, 2)//第三个参数为最大高度，应根据实际情况在前端进行设置，取值，暂写为固定
                        accuratePathList.push(curCoordinate)
                        //console.log(lnglat)
                        var marker = new AMap.Marker({
                            position: new AMap.LngLat(lnglat.lng, lnglat.lat),// 经纬度对象
                            title: '坐标点'
                        });
                        map.add(marker)
                    }
                }
                console.log(accuratePathList)//将此accuratePathList，也就是路径数组传给后端进行后续操作
            }
        }
    });

    //获取曲线轨迹上某一点的坐标；x0, y0, x1, y1, x2, y2分别表示曲线起点、控制点、终点的横纵坐标；t是参数，范围0-1
    function getPathPoint(x0, y0, x1, y1, x2, y2, t) {
        let x = (1-t)*(1-t)*x0 + 2*t*(1-t)*x1 + t*t*x2
        let y = (1-t)*(1-t)*y0 + 2*t*(1-t)*y1 + t*t*y2
        return [x, y]
    }
</script>
</body>
</html>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
    <button class="btn" onclick="bezierCurveEditor.open()" style="margin-bottom: 5px">改变曲率</button>
    <button class="btn" onclick="bezierCurveEditor.close()">固定曲率</button>
    <button id = "curvePath" class="btn" @click="getPath">获取曲线路径</button>
</div>
<script type="text/javascript">
    //定义一个数据结构，用于表示无人机所在的经纬度以及高度信息
    function Location(X, Y, Z) {
        this.X = X
        this.Y = Y
        this.Z = Z
    }

    var map = new AMap.Map("container", {
        center: [114.360734, 30.541093],
        zoom: 14
    });

    var path = [[114.360734, 30.541093],//起点
        [114.361734, 30.543093, 114.360734, 30.545093]]//控制点，途经点

    var bezierCurve = new AMap.BezierCurve({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 3,
        strokeColor: "#3366FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 10],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })

    bezierCurve.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ bezierCurve ])

    var bezierCurveEditor = new AMap.BezierCurveEditor(map, bezierCurve)

    bezierCurveEditor.on('addnode', function(event) {
        log.info('触发事件：addnode')
    })

    bezierCurveEditor.on('adjust', function(event) {
        log.info('触发事件：adjust')
    })

    bezierCurveEditor.on('removenode', function(event) {
        log.info('触发事件：removenode')
    })

    bezierCurveEditor.on('end', function(event) {
        log.info('触发事件： end')
        // event.target 即编辑后的曲线对象
    })

    let getPath = new Vue({
        el:'#curvePath',
        methods:{
            getPath(){
                var accuratePathList = []//根据需求记录曲线上精细的坐标点信息

                var pathList =  bezierCurve.getPath()
                console.log("路径：")
                console.log(pathList)
                //获取各个曲线分段的控制点以及终点坐标，用于重新计算得到曲线方程，便于后续获取曲线上任意个点
                for (var pathNum = 1; pathNum < pathList.length; pathNum++) {
                    var pixel0 = map.lngLatToContainer(new AMap.LngLat(pathList[pathNum-1].lng,pathList[pathNum-1].lat))
                    var pixel1 = map.lngLatToContainer(new AMap.LngLat(pathList[pathNum].lng,pathList[pathNum].lat))
                    var pixel1_control = map.lngLatToContainer(new AMap.LngLat(pathList[pathNum].controlPoints[0].lng,pathList[pathNum].controlPoints[0].lat))
                    // console.log("起始点：" + pixel0.x + " " + pixel0.y)
                    // console.log("控制点：" + pixel1_control.x + " " + pixel1_control.y)
                    // console.log("结束点：" + pixel1.x + " " + pixel1.y)
                    // console.log("路径长度：" + bezierCurve.getLength())

                    //尝试在地图上标记点位
                    var pointCount = 11;//暂时写成固定的，后续可以根据需求进行路径上点的数量的调整
                    for (var num = 0; num < pointCount; num++) {
                        var t = num * (1 / (pointCount - 1))
                        var pixel = getPathPoint(pixel0.x, pixel0.y, pixel1_control.x, pixel1_control.y, pixel1.x, pixel1.y, t)
                        //console.log("第" + (num + 1) + "个点:" + pixel[0] + " " + pixel[1])

                        var pixelMap = new AMap.Pixel(pixel[0], pixel[1])
                        var lnglat = map.containerToLngLat(pixelMap)
                        var curCoordinate = new Location(lnglat.lng, lnglat.lat, 2)//第三个参数为最大高度，应根据实际情况在前端进行设置，取值，暂写为固定
                        accuratePathList.push(curCoordinate)
                        //console.log(lnglat)
                        var marker = new AMap.Marker({
                            position: new AMap.LngLat(lnglat.lng, lnglat.lat),// 经纬度对象
                            title: '坐标点'
                        });
                        map.add(marker)
                    }
                }
                console.log(accuratePathList)//将此accuratePathList，也就是路径数组传给后端进行后续操作
            }
        }
    });

    //获取曲线轨迹上某一点的坐标；x0, y0, x1, y1, x2, y2分别表示曲线起点、控制点、终点的横纵坐标；t是参数，范围0-1
    function getPathPoint(x0, y0, x1, y1, x2, y2, t) {
        let x = (1-t)*(1-t)*x0 + 2*t*(1-t)*x1 + t*t*x2
        let y = (1-t)*(1-t)*y0 + 2*t*(1-t)*y1 + t*t*y2
        return [x, y]
    }
</script>
</body>
</html>